<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>邀请函</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/mofang.css"/>
	</head>
	<body>
		<div class="web">
			<div class="music" onclick="plays()">
				<img src="img/music.png"/>
				<audio autoplay preload id="music">
					<source src="music/happiness.mp3" type="audio/mp3"></source>
				</audio>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<!--首页banan-->
					<div class="swiper-slide page page6">
						<div class="page6_font">
							<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="300ms">
								“营销突围并肩前行”雄德业供应商大会
							</p>
						</div>
						<div class="page6_content ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1300ms">
							<div class="page6_title1 ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="2000ms">
								<h1>LEAD CHANGE</h1>
								<h2>AND WIN THE FUTURE</h2>
							</div>
							<div class="page6_title2 ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="2700ms">
								<h1>引领变革</h1>
								<h2>共赢未来</h2>
							</div>
							<div class="page6_title3 ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="3400ms">
								<h1>2018焊接+@招商会</h1>
								<h2>2018 welding + @ investment</h2>
							</div>
						</div>
						<div class="page6-bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="4300ms">
							<img src="img/touch.png"/>
						</div>
					</div>
					<!--1.营销-->
					<div class="swiper-slide page page3">
						<div class="page3-title ani">
							<div class="page3-title-fl ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="700ms" swiper-animate-delay="300ms">
								<img src="img/page6_left1.png"/>
								<div class="page3_titles1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="700ms" swiper-animate-delay="1000ms">
									<img src="img/page6_left2.png"/>
								</div>
							</div>
							<div class="page3-title-fr ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="700ms" swiper-animate-delay="300ms">
								<img src="img/page6_right1.png"/>
								<div class="page3_titles2 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="700ms" swiper-animate-delay="1000ms">
									<img src="img/page6_right2.png"/>
								</div>
							</div>
							<div class="page3-size">
								<h1 class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1700ms">营销突围并肩前行</h1>
								<h2 class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1700ms">引领变<span>革</span><span>·</span>共赢未来</h2>
							</div>
						</div>
						<div class="page3-li ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2700ms">
								<div class="page3-ul1">
									<li><img src="img/page3_li1.jpg"/></li>
								    <li><img src="img/page3_li1.jpg"/></li>
								    <li><img src="img/page3_li1.jpg"/></li>
								    <li><img src="img/page3_li1.jpg"/></li>
								    <li><img src="img/page3_li1.jpg"/></li>
								    <li><img src="img/page3_li1.jpg"/></li>
								</div> 
							</div>
						<div class="page3_font">
							<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3700ms">2018年1月27日——1月28日，“营销</h1>
							<h2 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3800ms">突围并肩前行”雄德业供应商大会，</h2>
							<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3900ms">“引领变革•共赢未来”2018焊接+@智</h1>
							<h2 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4000ms">能解决方案招商会将在</h2>
							<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4100ms">新君悦国际大酒店举行。</h1>
						</div>
						<div class="page3-bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5100ms">
							<img src="img/touch.png"/>
						</div>
					</div>
					<!--2.酒店-->
					<div class="swiper-slide page page1">
							<div class="font1 ani"  swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="300ms">
								<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1300ms">
									主办方重视的心血凝聚
								</h1>
							</div>
							<div class="page1-li ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2300ms">
								<div class="page1-li1">
									<li><img src="img/page1_li1.jpg"/></li>
								    <li><img src="img/page1_li2.jpg"/></li>
								    <li><img src="img/page1_li3.jpg"/></li>
								    <li><img src="img/page1_li1.jpg"/></li>
								    <li><img src="img/page1_li2.jpg"/></li>
								    <li><img src="img/page1_li3.jpg"/></li> 
								</div>
							</div>
							<div class="page1-li2 ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="1s" swiper-animate-delay="3300ms">
								<div class="page1-ul2">
									<li><img src="img/page1_li2.jpg"/></li>
								    <li><img src="img/page1_li3.jpg"/></li>
								    <li><img src="img/page1_li1.jpg"/></li>
								    <li><img src="img/page1_li2.jpg"/></li>
								    <li><img src="img/page1_li3.jpg"/></li>
								    <li><img src="img/page1_li1.jpg"/></li>
								</div>
							</div>
							<div class="page1-li3 ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s" swiper-animate-delay="3300ms">
								<div class="page1-ul3">
									<li><img src="img/page1_li3.jpg"/></li>
								    <li><img src="img/page1_li1.jpg"/></li>
								    <li><img src="img/page1_li2.jpg"/></li>
								    <li><img src="img/page1_li3.jpg"/></li>
								    <li><img src="img/page1_li1.jpg"/></li>
								    <li><img src="img/page1_li2.jpg"/></li>
								</div>
							</div>
							<div class="clear"></div>
							<div class="font2">
								<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4300ms">格调豪华的</h1>
								<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4400ms">国际大酒店会议现场</h1>
							</div>
							<div class="page1-bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5400ms" swiper-animate-delay="5400ms">
								<img src="img/touch.png"/>
							</div>
					</div>
				<!--3.客服-->	
				<div class="swiper-slide page page2">
					<div class="font1 ani"  swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="300ms">
						<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1300ms">
							主办方重视的心血凝聚
						</h1>
					</div>
					<div class="page2-li1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2300ms">
								<div class="page2-ul1">
									<li><img src="img/page2_li1.jpg"/></li>
								    <li><img src="img/page2_li2.jpg"/></li>
								    <li><img src="img/page2_li3.jpg"/></li>
								    <li><img src="img/page2_li1.jpg"/></li>
								    <li><img src="img/page2_li2.jpg"/></li>
								    <li><img src="img/page2_li3.jpg"/></li>
								</div>
							</div>
							<div class="page2-li2 ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3500ms">
								<div class="page2-ul2">
									<li><img src="img/page2_li2.jpg"/></li>
								    <li><img src="img/page2_li3.jpg"/></li>
								    <li><img src="img/page2_li1.jpg"/></li>
								    <li><img src="img/page2_li2.jpg"/></li>
								    <li><img src="img/page2_li3.jpg"/></li>
								    <li><img src="img/page2_li1.jpg"/></li>
								</div>
							</div>
							<div class="page2-li3 ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3300ms">
								<div class="page2-ul3">
									<li><img src="img/page2_li3.jpg"/></li>
								    <li><img src="img/page2_li1.jpg"/></li>
								    <li><img src="img/page2_li2.jpg"/></li>
								    <li><img src="img/page2_li3.jpg"/></li>
								    <li><img src="img/page2_li1.jpg"/></li>
								    <li><img src="img/page2_li2.jpg"/></li>
								</div>
							</div>
							<div class="clear"></div>
							<div class="font2">
								<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4500ms">贴心的客服级会议接待标准</h1>
							</div>
							<div class="page2-bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5600ms" swiper-animate-delay="5400ms">
								<img src="img/touch.png"/>
							</div>
					
				</div>
				<!--4.电子化-->	
				<div class="swiper-slide page page2">
					<div class="font1 ani"  swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="300ms">
						<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1300ms">
							主办方重视的心血凝聚
						</h1>
					</div>
					<div class="page2-li1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2300ms">
								<div class="page2-ul1">
									<li><img src="img/page6_li1.jpg"/></li>
								    <li><img src="img/page6_li2.jpg"/></li>
								    <li><img src="img/page6_li3.jpg"/></li>
								    <li><img src="img/page6_li1.jpg"/></li>
								    <li><img src="img/page6_li2.jpg"/></li>
								    <li><img src="img/page6_li3.jpg"/></li>
								</div>
							</div>
							<div class="page2-li2 ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3500ms">
								<div class="page2-ul2">
									<li><img src="img/page6_li2.jpg"/></li>
								    <li><img src="img/page6_li3.jpg"/></li>
								    <li><img src="img/page6_li1.jpg"/></li>
								    <li><img src="img/page6_li2.jpg"/></li>
								    <li><img src="img/page6_li3.jpg"/></li>
								    <li><img src="img/page6_li1.jpg"/></li>
								</div>
							</div>
							<div class="page2-li3 ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3300ms">
								<div class="page2-ul3">
									<li><img src="img/page6_li3.jpg"/></li>
								    <li><img src="img/page6_li1.jpg"/></li>
								    <li><img src="img/page6_li2.jpg"/></li>
								    <li><img src="img/page6_li3.jpg"/></li>
								    <li><img src="img/page6_li1.jpg"/></li>
								    <li><img src="img/page6_li2.jpg"/></li>
								</div>
							</div>
							<div class="clear"></div>
							<div class="font2">
								<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4500ms">全程电子化的</h1>
								<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4600ms">会议交流模式</h1>
							</div>
							<div class="page2-bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5600ms" swiper-animate-delay="5400ms">
								<img src="img/touch.png"/>
							</div>
					
				</div>
				<!--4.智能化-->
				<div class="swiper-slide page page4">
					<div class="font1 ani"  swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="300ms">
						<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1300ms">
							焊机智能化转型势在必行
						</h1>
					</div>
					<div class="page4_li1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="2300ms">
						<div class="page4_ul1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="2300ms">
							<li><img src="img/page4_li1.jpg"/></li>
							<li><img src="img/page4_li1.jpg"/></li>
							<li><img src="img/page4_li1.jpg"/></li>
							<li><img src="img/page4_li1.jpg"/></li>
							<li><img src="img/page4_li1.jpg"/></li>
							<li><img src="img/page4_li1.jpg"/></li>
						</div>
					</div>
					<div class="page4_font" >
						<h1 class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="3300ms">互联网大咖莅临</h1>
						<h2 class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="4300ms">带领“焊接+@”转型</h2>
						<p  class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="4400ms">私人定制转型盈利方案</p>
					</div>
					<div class="page4-bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5000ms" swiper-animate-delay="5400ms">
						<img src="img/touch.png"/>
					</div>
				</div>
				<!--6.诚邀-->
				<div class="swiper-slide page page5">
					<div class="font1 ani"  swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="300ms">
						<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1300ms">
							诚意邀请您的莅临
						</h1>
					</div>
					<div class="clear"></div>
					<div class="page5-content">
						<div class="ball">
					        <div class="line-1"><img src="img/pager_ball.png"/></div>
					        <div class="line-2"><img src="img/pager_ball.png"/></div>
					        <div class="line-3"><img src="img/pager_ball.png"/></div>
					        <div class="line-4"><img src="img/pager_ball.png"/></div>
					        <div class="line-5"><img src="img/pager_ball.png"/></div>
					     </div>
					</div>
					<div class="font2">
						<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2300ms">“焊接+@”智能转型方案</h1>
						<h1 class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="2500ms">引领变革·共赢未来</h1>
						<h1 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2700ms">我们义不容辞</h1>
					</div>
				</div>
				</div>
				
			</div>
			 
		</div>
		
		
		
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/swiper-3.4.2.min.js" type="text/javascript"></script>
		<!--引入swrper的animate脚本-->
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
		</script>
		<script>var swiper = new Swiper('.swiper-container', {
			
			direction: 'vertical',
//			autoplay: 10000,
			parallax: true,
			freeModeMomentumBounce:false,
			
			
			onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
				swiperAnimateCache(swiper); //隐藏动画元素 
				swiperAnimate(swiper); //初始化完成开始动画
			},
			onSlideChangeEnd: function(swiper) {
				swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			}
		})
		</script>
		<script type="text/javascript">
			var opens =true;
			var musics =document.getElementById("music");
			var num=0;
			var music_img =document.getElementsByClassName("music")[0];
			function times(){
				music_img.style.transform='rotate('+num+'deg)';
				num++;
			}
			var a =setInterval(times,10);
			function plays(){
					if(opens==true){
						musics.pause();
						clearInterval(a);
						opens=false;
					}
					else if(opens==false){
						musics.play();
						a =setInterval(times,10);
						opens=true;
					}
			}
			var ul = document.getElementsByClassName("page1-li1")[0];
			var ul2 = document.getElementsByClassName("page1-ul2")[0];
			var ul3 = document.getElementsByClassName("page1-ul3")[0];
			var ul4 = document.getElementsByClassName("page3-ul1")[0];
			var ul5 = document.getElementsByClassName("page4_ul1")[0];
			var ul_1 = document.getElementsByClassName("page2-ul1")[0];
			var ul_2 = document.getElementsByClassName("page2-ul2")[0];
			var ul_3 = document.getElementsByClassName("page2-ul3")[0];
			var nums = 90;
			var num2 = 90;
			var b =setInterval(function(){
				ul.style.transform='rotateY('+nums+'deg)';
				ul_1.style.transform='rotateY('+nums+'deg)';
				ul4.style.transform='rotateY('+nums+'deg)';
				ul5.style.transform='rotateY('+nums+'deg)';
				nums=nums+90; 
			},5000) 
			var c =setInterval(function(){
				ul2.style.transform='rotateY('+num2+'deg)';
				ul3.style.transform='rotateY('+num2+'deg)';
				ul_2.style.transform='rotateY('+num2+'deg)';
				ul_3.style.transform='rotateY('+num2+'deg)';
				num2=num2+90; 
			},6000) 
			
		</script>
	</body>
</html>
